<template>
	<div class="crud-container flex-column pt-1 plr-1">
		<cl-tabs-card v-model="activeName" :tabs="tabs" />
		<cl-flex1 style="overflow: hidden;">
			<transition name="fade-transform" mode="out-in">
				<keep-alive>
					<template v-for="tab in tabs">
						<component :key="tab.name" :is="tab.name" v-if="activeName == tab.name" />
					</template>
				</keep-alive>
			</transition>
		</cl-flex1>
	</div>
</template>
<script>
export default {
	name: "SetCondition",
	components: {
		tag: () => import("./components/tag"),
		service: () => import("./components/service"),
		card: () => import("./components/card"),
		product: () => import("./components/product")
	},
	data() {
		return {
			activeName: "tag",
			height: 0,
			tabs: [
				{ label: "标签", name: "tag" },
				{ label: "服务", name: "service" },
				{ label: "产品", name: "product" },
				{ label: "卡项", name: "card" }
			]
		};
	},
	created() {},
	methods: {
		handleClick() {},
		onResize(h) {
			this.height = h;
		}
	}
};
</script>
<style lang="scss" scoped>
.crud-container {
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: #fff;
}
.index {
	background-color: #fff;
	height: 100%;
	box-sizing: border-box;
}
::v-deep .el-tabs__header {
	margin-bottom: 0;
}
</style>
